<template>
    <view class="content" style="background:url('./static/img/login.png') no-repeat center;background-size:cover;">
		<view class="auth-body-content">
			<view class="content-info flex-row space-around">
				<button type="warn" @click="goToPage()">前往体验页面</button>
				<button type="warn" v-show="authShow" @click="auth" open-type="getUserInfo">微信授权登录</button>
			</view>
			<view v-show="!authShow">
				<view class="content-info">
					<button type="warn" class="getPhoneSubmit" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">是否同意获取您的手机号</button>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                rawData: '',
                code: '',
                timing: null,
				authShow: true,
				shareInfo: {}
            }
        },
        mounted() {
        },
        methods: {
			// 前往体验页面
			goToPage() {
				uni.navigateTo({
					url: '/pages/views/file/index'
				});
			},
            // 点击授权
            auth() {
                uni.showLoading({
                    title: 'loading'
                });
                const that = this
				uni.login({
				    success(res) {
				        that.code = res.code
				    }
				})
                that.timing = setTimeout(() => {
                    wx.getUserInfo({
                        withCredentials: true,
                        success: (res) => {
                            wx.setStorageSync("signature", res.signature)
                            that.rawData = res.rawData
                            // 此处为获取微信信息后的业务方法
                            uni.request({
                                url: `${that.baseUrl}/api/wx/loginAuth`,
                                data: {
                                    code: that.code,
                                    iv: res.iv,
                                    appid: that.appid,
                                    encryptedData: res.encryptedData
                                },
                                method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                                header: {
                                    'content-type': 'application/json'
                                },
                                success: (res) => {
                                    if(res.data.code == 0){ 
										let data = res.data.result
										if(data.token){
											wx.setStorageSync("token", data.token)
											wx.setStorageSync("openId", data.openId)
											wx.setStorageSync("sessionKey", data.sessionKey)
											wx.setStorageSync("phone", data.phone)
										}
										if(data.phone == null || data.phone == ""){
											uni.hideLoading()
											this.authShow = false
										}else{
											uni.redirectTo({
												url: '/pages/views/index/index'
											});
										}
									}else{
										uni.showToast({
										    title: '登录失败，请联系管理员1',
										    icon: 'none',
										    duration: 2000
										});
									}
                                },
                                fail: (error) => {
                                    this.authShow = true
                                    uni.showToast({
                                        title: '登录失败，请联系管理员2',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            })
                        },
                        fail: function(res) {
                            uni.hideLoading()
                        }
                    })
                }, 500);
            },
		   // 获取手机号
			onGetPhoneNumber (e) {
				if(e.detail.encryptedData){
					this.phoneBind(e.detail.iv,e.detail.encryptedData)
				}
			 },
			// 把手机号传入后台
			phoneBind(iv, encryptedData){
				let openId = wx.getStorageSync('openId')
				let sessionKey = wx.getStorageSync('sessionKey')
				let signature = wx.getStorageSync('signature')
				uni.showLoading({
					title: 'loading'
				});
				uni.request({
					url: `${this.baseUrl}/api/wx/bindPhoneByOpenId`,
					method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
					data: {
						appid: `${this.appid}`,
						sessionKey: sessionKey,
						signature: signature,
						iv: iv,
						openId: openId,
						rawData: this.rawData,
						encryptedData: encryptedData
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log(res)
						if(res.data.code == 0){
							wx.setStorageSync("token", res.data.result)
							uni.hideLoading()
							uni.redirectTo({
								url: '/pages/views/index/index'
							});
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '登陆失败，请联系管理员',
								icon: 'none',
								duration: 2000
							});
						}
						// 回调处理
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
        }
    }
</script>

<style>
    page{
        min-height: 100vh;
        overflow: hidden;
    }
	.content{
		height: 100vh;
	}
    .auth-body-content{
		position: relative;
		text-align: center;
    }
	.content-info{
		position: fixed;
		top: 80%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
	}
    .content-info button{
		width: 340rpx;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 32rpx;
        background: #84D5F7 !important;
		color: #FFFFFF;
		font-weight: 500;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		border-radius: 90rpx;
    }
    .content-info button::after{
        content: '';
		border: none;
    }
    .getPhone-title{
        font-size: 28rpx;
        margin-bottom: 40rpx;
        text-align: center;
    }
</style>
